
<template>
  <div>
    <div id="part_one">
      <span> 省：</span>
      <el-autocomplete class="inline-input"
                       v-model="state1"
                       :fetch-suggestions="querySearch"
                       placeholder="全部省份"
                       suffix-icon="el-icon-arrow-down"
                       @select="handleSelect"></el-autocomplete>
    </div>
    <div id="part_two">
      <div class="container">
          <span>按年：</span>
          <el-date-picker v-model="value3"
                          type="year"
                          placeholder="选择年"
                          style="width:150px;margin-right:100px">
          </el-date-picker>
      </div>
      <div class="container">
        <span>按月份：</span>
        <el-date-picker v-model="value2"
                        type="month"
                        placeholder="选择月"
                         style="width:150px">
        </el-date-picker>
      </div>
    </div>
    <div id="part_three">
      销量排序：
      <el-radio-group v-model="radio">
        <el-radio :label="3" checked>全部</el-radio>
        <el-radio :label="6">降序</el-radio>
        <el-radio :label="9">升序</el-radio>
      </el-radio-group>
    </div>
    <el-table :data="tableData"
              style="width: 100%">
      <el-table-column prop="date"
                       label="省"
                       width="820">
      </el-table-column>
      <el-table-column prop="name"
                       label="总活跃度"
                       width="820">
      </el-table-column>
    </el-table>
  </div>
</template>
<style scoped>
  .inline-input{
    width:217px;
  }
  #part_one{
    margin:30px;
  }
  #part_two{
    display:flex;
    align-items:center; 
    margin:30px 0 0 30px;
  }
  #part_three {
    margin:30px;
  }
</style>
<script>
  export default {
    data() {
      return {
        radio: "1",
        tableData: [{
          date: '四川省',
          name: '140',

        }, {
          date: '重庆市',
          name: '30',

        }, {
          date: '北京市',
          name: '60',

        }, {
          date: '江苏省',
          name: '10',

        }, {
          date: '上海市',
          name: '50',

        }, {
          date: '河南省',
          name: '20',

        }]
      }
    }
  }
</script>
